<template>
  <div class="forgot sign_in">
    <div class="card-wrapper">
	  <div class="left"></div>
      <div class="right">
        <div class="title">忘记密码</div>
        <el-form
          class="login-form"
          ref="ruleFormRef"
          label-width="120px"
          :label-position="'top'"
          :model="ruleForm"
          :rules="rules"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              size="large"
              class="input"
              v-model="ruleForm.username"
              prefix-icon="User"
              autocomplete="new-password" 
			  placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              size="large"
              class="input"
              v-model="ruleForm.password"
              prefix-icon="Lock"
              type="password"
              autocomplete="new-password" 
              show-password 
			  placeholder="请输入新密码"
            >
            </el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirm_password">
            <el-input
              size="large"
              class="input"
              v-model="ruleForm.confirm_password"
              prefix-icon="Lock"
              type="password"
              show-password 
			  placeholder="请重新输入密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              size="large"
              class="input"
              v-model="ruleForm.email"
              prefix-icon="Lock"
              type="email" 
              placeholder="请输入邮箱"
            >
            </el-input>
          </el-form-item>
          <el-form-item  label="验证码" prop="code">
							<el-input style="height: 38px;" prefix-icon="Message" v-model="ruleForm.code" placeholder="请输入验证码">
                <template #append><el-button @click="send()" >发送验证码</el-button></template>
								
							</el-input>
						</el-form-item>
  
        </el-form>
        <div class="button-wrapper">
          <el-button
            class="button"
           
            type="primary"
            @click="forgot()"
            >提交</el-button
          >
          <el-button
            @click="router.push('/')"
            class="button"
            type="primary"
            >返回登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Identify from "./Identify.vue";
import { reactive, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { $post, $get } from "@/api/Api.js";
let router = useRouter();
let store = useStore();
let ruleFormRef = ref(null);
let identifyState = ref(true);
// 邮箱校验
const validate_email = (rule, value, callback) => {
  var emailRegExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  var emailRegExp1 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  if (
    (!emailRegExp.test(value) && value != "") ||
    (!emailRegExp1.test(value) && value != "")
  ) {
    callback(new Error("请输入有效邮箱格式！"));
  } else {
    callback();
  }
};
let ruleForm = ref({
  username: "",
  password: "",
  confirm_password: "",
  email: "",
  code: "",
});

let rules = ref({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
    { min: 5, max: 16, message: "账户名长度为在5-16个字符", trigger: "blur" },
  ],

  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    { min: 5, max: 16, message: "密码长度为在5-16个字符", trigger: "blur" },
  ],
  confirm_password: [
    {
      required: true,
      message: "再次请输入密码",
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入邮箱格式example@123.com",
      trigger: "blur",
    },
    { validator: validate_email, trigger: ["blur"] },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});

// 获取随机图片验证码
let send = () => {
  var random = Math.floor(Math.random()*9999);
				for(var i = random.length;i < 4;i++){
					random = "0" + random;
				}
	ruleForm.value.code = random.toString();

};

// 登录
let forgot = async () => {
  let valid = await ruleFormRef.value.validate();
  if (valid) {
    let { username, password, confirm_password, email,code } = ruleForm.value;
    let form = {
    "username": username,
    "phone": "",
    "email": email,
    "password": password,
    "code": code
}
    // form.is_face = "face";
    $post("/api/user/forget_password", form).then((res) => {
      if (res.result) {
        router.push('./');
      } else if (res.error) {
        ElMessage.error(res.error.message);
      }
    });
    ruleFormRef.value.resetFields()
  }
};

// let getRsaPassword = (pas) => {
//   let jse = new jsencrypt();
//   jse.setPublicKey(`-----BEGIN PUBLIC KEY-----
//   MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKdKk67IWN0Qd94HuSlqbx4cqMY
//   lq31Cyp4BUe2ByqkZlymuWlFsr4byVcPArPcz2ReJGUVaV3dLOH5A8c/od
//   msCAwEAAQ==
//   -----END PUBLIC KEY-----`);
//   return jse.encrypt(pas);
// };

onMounted(() => {
});
</script>

<style lang="less" scoped>
.forgot {
  position: relative;
  height: 100%;
  background-image: url("../../assets/images/bg.jpg");
  background-size: 100% 100%;
  .card-wrapper {
    z-index: 999;
    background: white;
    width: 900px;
    height: 600px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    margin: auto;
    .left {
      width: 400px;
      background-image: url("../../assets/images/bg.jpg");
    }
    .right {
      margin: 20px 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .title {
        font-size: 34px;
        // color: #4caaa2;
      }
      .login-form {
        .input {
          width: 100%;
        }
      }
      .button-wrapper {
        text-align: center;
      }
    }
  }
}
</style>

<style lang="less">
.forgot {
  .right {
    .pictureCode {
      .el-input-group__append {
        padding: 0;
      }
    }
  }
}
</style>
